<template>
    <div class="know-role-page">
        <div class="know-role-title">
            <div class="left">
                <div class="role-item" :class="[knowRoleType == 'all' && 'active']" @click="changeRoleType('all')">
                    {{ $t('message.text.networkWide') }}</div>
                <div class="role-item" :class="[knowRoleType == 'register' && 'active']"
                    @click="changeRoleType('register')">{{ $t('message.text.enterpriseLibrary') }}</div>
            </div>
            <div class="right">
                <el-button type="primary" @click="openSelectUser()">
                    <svg class="add-icon">
                        <use xlink:href="#keowledge-xinjian"></use>
                    </svg>
                    {{ $t('message.buttons.addMembers') }}
                </el-button>
            </div>
        </div>
        <div class="know-role-tips">
            {{ knowRoleType == 'all' ? $t('message.text.netWorkShow') : $t('message.text.enterpriseShow') }}
        </div>
        <el-table :data="tableData" header-row-class-name='table-header-class' style="height:calc(100% - 130px);"
            v-loading="tbleLoading">
            <el-table-column prop="name" :label="$t('message.table.name')"></el-table-column>
            <el-table-column prop="createBy" :label="$t('message.table.createBy')" />
            <el-table-column prop="createTime" :label="$t('message.table.createTime')" />
            <el-table-column prop="updateTime" :label="$t('message.table.updateTime')" />
            <el-table-column :label="$t('message.table.operation')" width="120px">
                <template #default="scope">
                    <el-button type="text" @click="delRole(scope.row.id)">{{ $t('message.buttons.delete') }}</el-button>
                </template>
            </el-table-column>
            <template #empty>
                <jvs-empty></jvs-empty>
            </template>
        </el-table>
        <div class="know-role-page-box">
            <el-pagination background layout="prev, pager, next" :total="pageObj.total" :page-size="pageObj.size"
                v-model:current-page="pageObj.current" @current-change="handleCurrentChange" />
        </div>
    </div>
    <userSelector ref="userSelectorRef" :userEnable="true" :jobEnable="true" :roleEnable="true" :deptEnable="true"
        :groupEnable="true" @submit="submitUserSelector"></userSelector>
</template>

<script setup lang="ts">
import {
    ref,
    reactive,
    toRefs,
    watch,
    onMounted,
    getCurrentInstance
} from 'vue'

import { useRouter } from "vue-router"
import { getKnowUserPage, delKnowUser, saveKnowUser } from '@/api/role'
import userSelector from "@/components/basic-assembly/userSelector.vue"
import { useHookI18n } from '@/hooks/i18n'
const { locale, $t } = useHookI18n()
const router = useRouter();
const { proxy } = getCurrentInstance()

const knowRoleType = ref('all')
const pageObj = ref({
    current: 1,
    size: 30,
    total: 0
})
const tableData = ref([])
const tbleLoading = ref(false)
const userSelectorRef = ref()
onMounted(() => {
    proxy.$eventBus.$emit('breadListChange', 'message.text.networkWide')
    getRoleUserPage()
})
function changeRoleType(val) {
    if (val != knowRoleType.value) {
        proxy.$eventBus.$emit('breadListChange', val == 'all' ? 'message.text.networkWide' : 'message.text.enterpriseLibrary')
        knowRoleType.value = val
        getRoleUserPage()
    }
}
function getRoleUserPage() {
    tbleLoading.value = true
    getKnowUserPage({
        libraryType: knowRoleType.value,
        size: pageObj.value.size,
        current: pageObj.value.current
    }).then(res => {
        if (res.data.code == 0) {
            tableData.value = res.data.data.records
            pageObj.value.total = res.data.data.total
        }
        tbleLoading.value = false
    }).catch(() => {
        tbleLoading.value = false
    })
}
function delRole(id) {
    proxy.$confirm($t('message.confirm.delAuth'), $t('message.prompt'), {
        confirmButtonText: $t('message.buttons.submit'),
        cancelButtonText: $t('message.buttons.cancal'),
        type: 'warning'
    }).then(() => {
        delKnowUser(id).then(res => {
            if (res.data.code == 0) {
                getRoleUserPage()
            }
        })
    }).catch(() => { });
}
function openSelectUser() {
    userSelectorRef.value.openDialog([])
}
function submitUserSelector(arr) {
    let idsList = []
    arr.forEach(item => {
        let type = item?.type;
        let memberData = {
            userId: item?.id,
            userType: type,
            name: item.name,
            libraryType: knowRoleType.value
        }
        idsList.push(memberData)
    })
    saveKnowUser(idsList).then(res => {
        if (res.data.code == 0) {
            getRoleUserPage()
        }
    })
}
function handleCurrentChange() {
    getRoleUserPage()
}
</script>
<style lang="scss" scoped>
.know-role-page {
    padding: 8px 24px;
    height: calc(100% - 16px);

    .know-role-title {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .left {
            display: flex;
            align-items: center;

            .role-item {
                height: 32px;
                line-height: 32px;
                font-size: 16px;
                color: #6f7588;
                @include SourceHanSansCN-Regular;
                cursor: pointer;
            }

            .active {
                color: #1E6FFF;
                @include SourceHanSansCN-Bold;
                position: relative;

                &::after {
                    content: '';
                    position: absolute;
                    left: 0px;
                    bottom: 1px;
                    height: 2px;
                    background: #1E6FFF;
                    border-radius: 2px 0px 2px 0px;
                    width: 100%;
                }
            }

            .role-item+.role-item {
                margin-left: 32px;
            }
        }

        .right {
            .add-icon {
                width: 14px;
                height: 14px;
                margin-right: 4px;
            }
        }
    }

    ::v-deep(.el-scrollbar__view) {
        height: 100%;
    }

    .know-role-tips {
        font-size: 14px;
        color: #6F7588;
        @include SourceHanSansCN-Regular;
        margin: 16px 0px;
    }

    ::v-deep(.table-header-class) {
        color: #363B4c;
        @include SourceHanSansCN-Bold;
        font-size: 12px;
        background: #F5F6F7;

        th {
            background: #F5F6F7;
        }
    }

    .know-role-page-box {
        display: flex;
        justify-content: end;
        margin-top: 8px;
    }
}
</style>